import React, { useState, useEffect } from 'react';
import { DatePicker, Space, Input, ConfigProvider, Drawer, Form, Button, notification } from 'antd'
import { PlusOutlined, ClearOutlined, SyncOutlined, ExpandAltOutlined, TagOutlined, RollbackOutlined, SearchOutlined } from '@ant-design/icons'
import 'dayjs/locale/zh-cn';
import './index.scss'
import locale from 'antd/es/locale/zh_CN';
import CustomTable from '../../../../components/ccl/CustomTable';
import * as service from '../../../../api/ccl';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
const Recharge = () => {
    const { Search } = Input;
    const { RangePicker } = DatePicker;
    const [open, setOpen] = useState(false)
    const [data, setData] = useState([])
    useEffect(() => {
        rechargeList()
    }, [])
    const rechargeList = async () => {
        const res = await service.selectAllBill({ page: 1, limit: 20 })
        console.log(res.data.data.records);
        if (res.data.code == 200) {
            setData(res.data.data.records)
        }
    }
    const toAdd = () => {
        setOpen(true)
    }
    const onChange = async (
        value: DatePickerProps['value'] | RangePickerProps['value'],
        dateString: [string, string] | string,
    ) => {
        if (dateString != '') {
            const res = await service.selectByWaybill({ StartTime: dateString[0], EndTime: dateString[1] })
            if (res.data.code == 200) {
                notification.success({ message: '查询成功', duration: 2 })
                setData(res.data.data)
            }
        }
    };
    const onSearch = async (value: string) => {
        if (value != '') {
            const newVal = value.toString()
            const res = await service.selectByWaybill({ waybill: newVal, page: 1, limit: 5 })
            if (res.data.code == 200) {
                notification.success({ message: '查询成功', duration: 2 })
                setData(res.data.data.records)
            }
        }
    };
    const handClear = async (record: any, index: any) => {
        const res = await service.deteleByWayill({ waybill: record.clientWaybill })
        if (res.data.code == 200) {
            notification.success({ message: "删除成功", duration: 2 })
            let newData = JSON.parse(JSON.stringify(data))
            newData.splice(index, 1)
            setData(newData)
        }
    }


    // 关闭抽屉
    const onClose = () => {
        setOpen(false)
    }
    // 
    const onFinish = async (values: any) => {
        values.clientTime = formattedDate
        const res = await service.addInsertclient(values)
        if (res.data.code == 200) {
            notification.success({ message: '新增成功', duration: 2 })
            console.log(res.data.data);

            // setData(res.data.data)
        }

    };
    var date = new Date()
    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date
        .getHours()
        .toString()
        .padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date
            .getSeconds()
            .toString()
            .padStart(2, '0')}`;

    const columns = [
        {
            title: '操作',
            key: 'proname',
            width: '100px',
            render: (record: any, index: any) => (
                <div className='caoz'>
                    <TagOutlined />
                    <ClearOutlined onClick={() => handClear(record, index)} />
                    <SearchOutlined />
                </div>
            )
        },
        {
            title: '充值单号',
            key: 'clientWaybill',
            dataIndex: 'clientWaybill',
        },
        {
            title: '客户',
            key: 'clientName',
            dataIndex: 'clientName',
        },
        {
            title: '类型',
            key: 'clientType',
            dataIndex: 'clientType',
        },
        {
            title: '金额',
            key: 'clientPrice',
            dataIndex: 'clientPrice',
        },
        {
            title: '操作人',
            key: 'clientOperator',
            dataIndex: 'clientOperator',
        },
        {
            title: '充值时间',
            key: 'clientTime',
            dataIndex: 'clientTime',
        }
    ]
    let newData = data.map((item: any, index: any) => ({
        key: index,
        index: item.clientId,
        clientName: item.clientName,
        clientOperator: item.clientOperator,
        clientPrice: item.clientPrice,
        clientTime: item.clientTime,
        clientType: item.clientType,
        clientWaybill: item.clientWaybill,
        clientProname: item.clientProname,
        clientStatus: item.clientStatus,
        clientWeight: item.clientWeight
    }))
    return (
        <div className='reacharge'>
            <div className="header">
                <div className="header-left">
                    <div className="add" onClick={toAdd}>
                        <PlusOutlined />
                        <span>新增充值单</span>
                    </div>
                </div>
                <div className="header-right">
                    <div className="time">
                        <Space direction="vertical" size={12}>
                            <ConfigProvider locale={locale}>
                                <RangePicker
                                    format="YYYY-MM-DD"
                                    onChange={onChange}
                                />
                            </ConfigProvider>
                        </Space>
                    </div>
                    <div className="search">
                        <Search
                            placeholder="请输入选货单号"
                            allowClear
                            enterButton="搜索"
                            onSearch={onSearch}
                        />
                    </div>
                    <div className="operation">
                        <ClearOutlined />
                        <SyncOutlined />
                        <ExpandAltOutlined />
                    </div>
                </div>
            </div>
            <Drawer title="新增充值单" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="充值单号"
                        name="clientWaybill"
                        rules={[{ required: true, message: '请输入充值单号!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="客户名称"
                        name="clientName"
                        rules={[{ required: true, message: '请输入客户名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="充值类型"
                        name="clientType"
                        rules={[{ required: true, message: '请输入充值类型!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="充值金额"
                        name="clientPrice"
                        rules={[{ required: true, message: '请输入充值金额!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="操作人"
                        name="clientOperator"
                        rules={[{ required: true, message: '请输入操作人姓名!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="选择时间"
                        name="clientTime"

                    >
                        <DatePicker showTime onChange={onChange} />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            添加
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>

            {/* 表格 */}
            <CustomTable columns={columns} data={newData} />
        </div>
    );
};

export default Recharge;